<template>
  <header id="head" v-bind:class="header_search">
    <qcode v-if="$route.path.indexOf('search') === -1"></qcode>
    <searchComponent slot="search" class="search" @focusTip="onFocus" @cancelTip="onCancel" @enterTip="onEnter" @changeTip="onChange"></searchComponent>
    <a href="javascript:void(0)"  v-if="$route.path.indexOf('search') > 0" style="color:#727272;font-size:.46rem;vertical-align:middle;width:1.2rem;height:1.2rem;margin:.5rem 0rem;" @click="handleSearch">
      <img :src="search" alt="搜索" style="width:100%;height:100%;">
    </a>
  </header>
</template>
<script>
import qcode from 'components/q-code'
import searchComponent from 'components/search'
import {mapActions} from 'vuex'
export default {
  name: 'header',
  components: {
    searchComponent,
    qcode
  },
  data () {
    return {
      header_search: '',
      search: require('@/assets/search.png'),
      value: '',
    }
  },
  methods: {
    ...mapActions([
      'setMerchantsList'
    ]),
    // 通过this.$emit 传递子组件获取焦点事件
    onFocus (val, e) {
      if (e) {
        this.$router.push({path: 'search'})
      }
    },
    onCancel (e) {
      if (e) {
        console.log('')
      }
    },
    onChange(val){
      if(val){
        this.value = val;
      }else{
        this.$vux.toast.show({
					type: 'warn',
					text: '输入不能为空',
					time: 2000
				})
      }
    },
    handleSearch(){
      if(this.value){
        this.$emit('changeTip',this.value)
      }else{
        this.$vux.toast.show({
					type: 'warn',
					text: '输入不能为空',
					time: 2000
				})
      }
    },
    onEnter(val){
      if(val){
        this.$emit('enterTip',val)
      }else{
        this.$vux.toast.show({
					type: 'warn',
					text: '输入不能为空',
					time: 2000
				})
      }
    }
  }
}
</script>
<style scoped>
#head{
  position: fixed;
  top: 0px;
  width: 100%;
}
.qcode{
  background-color: #e5e5e5;
}
</style>
